You can use `useAuthenticator` hook to access `route` string that represents the current `authState`. They can be one of:

- `idle`
- `setup`
- `signIn`
- `signUp`
- `confirmSignIn`
- `confirmSignUp`
- `setupTOTP`
- `forceNewPassword`
- `resetPassword`
- `confirmResetPassword`
- `verifyUser`
- `confirmVerifyUser`
- `signOut`
- `authenticated`

```tsx{1,4-7}
import { useAuthenticator } from '@aws-amplify/ui-react';

const App = () => {
  const { route } = useAuthenticator(context => [context.route]);

  // Use the value of route to decide which page to render
  return route === 'authenticated' ? <Home /> : <Authenticator />;
};
```

### Authentication Check

If you just need to check if you're authenticated or not, you can use the more straightforward `useAuthenticator` hook to access the `authStatus` string. The `authStatus` string can represent the following states:

- `configuring`
- `authenticated`
- `unauthenticated`

> The `configuring` state only occurs when the `Authenticator` is first loading.

```tsx{1,4-7}
import { useAuthenticator } from '@aws-amplify/ui-react';

const App = () => {
  const { authStatus } = useAuthenticator(context => [context.authStatus]);

  // Use the value of authStatus to decide which page to render
 return (
    <>
      {authStatus === 'configuring' && 'Loading...'}
      {authStatus !== 'authenticated' ? <Authenticator /> : <Home />}
    </>
  );
};
```